<template>
  <Dialog
    width="1000px"
    title="商品详情"
    :visible.sync="innerVisible">
    <Portlet>
      <el-form label-position="left" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="厂家名称:">
              <span>{{ detail.manufacturersName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="商品编号:">
              <span>{{ detail.productNo }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="商品型号:">
              <span>{{ detail.productOutNo }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="商品名称:">
              <span>{{ detail.productName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="商品类别:">
              <span>{{ detail.bigClass }} / {{ detail.middleClass}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="规格:">
              <span>{{ detail.standard }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="材料类型:">
              <span>{{ detail.storageType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总包件:">
              <span v-if="detail.totalPackage">{{ detail.totalPackage }}</span>
              <span>/</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总体积(m³):">
              <span v-if="detail.totalVolume">{{ detail.totalVolume }}</span>
              <span>/</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总重量(kg):">
              <span v-if="detail.totalWeight">{{ detail.totalWeight }}</span>
              <span>/</span>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div class="clearfix"></div>
    </Portlet>

    <Portlet title="包件信息">
      <package-info :packageInfo="packageInfo"></package-info>
      <div class="clearfix"></div>
    </Portlet>
    <div slot="footer">
      <el-button @click="innerVisible = false">关闭窗口</el-button>
    </div>
  </Dialog>
</template>
<script>
import {unixTimestampFilter} from '@/filters'
import {dotData} from '@/utils'
import {httpGetResponse} from '@/utils/ajax'
import PackageInfo from '@/views/oms/basicData/manufactorPro/PackageInfo'
export default {
  name: 'ProductDetail',
  components: {
    PackageInfo
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: '/ms-warehouse-order/basicData/findCargoProductInfo' // 商家产品详情接口
    }
  },
  filters: {
    unixTimestampFilter
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      if (val && this.id) {
        this.getData()
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      loading: false,
      detail: {}
    }
  },
  created() {
  },
  computed: {
    packageInfo() {
      return dotData(this.detail, 'packageInfos') || []
    }
  },
  methods: {
    getData() {
      httpGetResponse('/ms-warehouse-order/basicData/findCargoProductInfo', {id: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.detail = response.data || {}
      })
    }
  }
}
</script>
